<template>
	<view>
		<z-nav-bar :title="data.data.dictLabel"></z-nav-bar>
		<view class="cp-top">
			<view class="cp-top-tit flex_fsc">
				<text>实战测试</text>
				<text class="lab">{{ data.data.dictLabel }}</text>
			</view>
			<view class="cp-gz">{{ data.data.remark }}</view>
			<view class="cp-ht">&nbsp;</view>
			<view class="cp-score-tit">详细成绩</view>
			<uni-table ref="table" border stripe emptyText="暂无更多数据">
				<uni-tr class="uni-color-main-bg">
					<uni-th align="center" width="168rpx">
						<view class="z-font-24 uni-white">评测项目</view>
					</uni-th>
					<uni-th align="center" width="168rpx">
						<view class="uni-white">值</view>
					</uni-th>
					<uni-th align="center" width="168rpx">
						<view class="uni-white">评分</view>
					</uni-th>
					<uni-th align="center" width="168rpx">
						<view class="uni-white">失误点</view>
					</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in data.list" :key="item.id">
					<uni-td align="center" class="z-font-24">{{ item.dictLabel }}</uni-td>
					<uni-td align="center">
						<view v-if="item.children[0].dictLabel == '值'">
							<view v-if="item.children[0].hasChildren" @click="openSliderBox(index, 0, '值')"
								class="z-font-24">
								<text>{{ typeof item.value === 'number' ? item.children[0].children[item.value].dictLabel : '选择' }}</text>
								<image :src="setting.oss_pub_domain + '/app-img/icon/icon_drop-down.png'" class="cp-scroe-more"></image>
							</view>
							<view v-else class="z-font-24 flex_cc" @click="openSliderBox(index, 1)">
								<view class="select-number">{{ item.value || item.children[0].dictExtF }}
								</view>
								<view>{{ item.children[0].dictExtS }}</view>
							</view>
						</view>
						<view v-else>--</view>
					</uni-td>
					<uni-td align="center">
						<uni-rate allow-half size="12" v-model="item.markValue" color="#E1E3E6" active-color="#FF7742" />
					</uni-td>
					<uni-td align="center">
						<view
							v-if="item.children[0].dictLabel == '失误点' || (item.children[1] && item.children[1].dictLabel == '失误点') || (item.children[2] && item.children[2].dictLabel == '失误点')">
							<view @click="openSliderBox(index, 0, '失误点')" class="z-font-24">
								<text>{{ typeof item.mistake === 'number' ? item.children.filter(el => el.dictLabel == '失误点')[0].children[item.mistake].dictLabel : '选择' }}</text>
								<image :src="setting.oss_pub_domain + '/app-img/icon/icon_drop-down.png'" class="cp-scroe-more"></image>
							</view>
						</view>
						<view v-else>--</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<z-slider ref="sliderZdd" :value="componentData.value" :startEnd="componentData.data"
			@change="setItem"></z-slider>
		<select-item ref="selectItemModule" :value="componentData.value" :data="componentData.data"
			:remark="componentData.remark" @change="setItem"></select-item>
		<bottom-box :buts="buts" @change="butChange"></bottom-box>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import {
		submitEvaluation
	} from '@/api/player.js'
	import SelectItem from "./select-item.vue"
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	const {
		proxy: that
	} = getCurrentInstance();


	const data = reactive(uni.getStorageSync('evaluation-data') || {})
	console.log(data);

	function submitData() {
		submitEvaluation({
			evaluationId: data.id,
			result: JSON.stringify(data),
			score: data.score,
			studentId: data.playerInfo.id,
			type: data.type
		}).then(res => {
			uni.setStorageSync('local-evaluation', data)
			that.tools.alert('提交成功')
			uni.redirectTo({
				url: '/pages/player/evaluation/evaluation-actualcombat/evaluation-szresult'
			})
		})
	}

	// 底部按钮显示控制
	const buts = [{
		label: '保存',
		bgColor: '#FF7742',
		width: 300
	}, {
		label: '完成评测',
		bgColor: 'uni-color-main-bg',
		width: 300
	}]

	function butChange(e) {
		if (e) {
			let count = 0
			data.list.forEach(item => {
				count += item.markValue || 0
			})
			data.score = parseFloat((count / data.list.length).toFixed(1))
			data.createTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
			submitData()
		} else {
			uni.setStorageSync('local-evaluation', data)
			that.tools.alert('保存成功')
			uni.navigateBack()
		}

	}


	// 滑动选择
	const sliderZdd = ref(''),
		editIndex = ref(0),
		thirdColumn = ref(false),
		componentData = reactive({
			value: '',
			data: '',
			remark: ''
		})

	function openSliderBox(index, type, col) {
		editIndex.value = index
		const tmpObj = data.list[index].children.filter(item => item.dictLabel == col)[0]
		if (col == '失误点') thirdColumn.value = true
		componentData.data = type ? data.list[index].children[0].dictExtF : tmpObj && tmpObj.children
		componentData.value = data.list[index][col == '失误点' ? 'mistake' : 'value']
		componentData.remark = type ? '' : tmpObj.remark
		that.$nextTick(() => {
			type ? sliderZdd.value.open() : selectItemModule.value.open()
		})
	}

	function setItem(e) {
		data.list[editIndex.value][thirdColumn.value ? 'mistake' : 'value'] = e
		thirdColumn.value = false
	}

	const selectItemModule = ref()
</script>

<style lang="scss">
	@import 'evaluation-nextDetail.scss';
</style>